<!DOCTYPE html>
<html lang="zh" class="app">
<head>
    <title>数据交换单元</title>
    <#include "../../../__ref_common.ftl" parse=true/>
    <link rel="stylesheet" href="${mvcPath}/dacp-view/datastash/workshop/unit_creator/css/unit.css">
    <link rel="stylesheet" href="${mvcPath}/dacp-view/datastash/workshop/unit_creator/css/vertical_guide.css">
</head>
<body>
    <div id="main">
        <elx-main>
            <div id="content" class="layout" >
                <div class="panel-header">
				    <span class="headinfo" v-html="panelTitles[stepActive]"></span>
				    <div id="content-operate" class="pull-right">
			            <elx-operate-button>
                            <elx-operate-item @click.native="pre"><span class="uex-icon  uex-icon-caret-left"></span>上一步</elx-operate-item>
				            <elx-operate-item @click.native="submit"><span class="uex-icon  uex-icon-save"></span>保存</elx-operate-item>
				            <elx-operate-item v-if="!((state=='0'||state=='2')&&stepActive==2)" @click.native="next">下一步<span class="uex-icon  uex-icon-caret-right"></span></elx-operate-item>
                            <elx-operate-item v-if="(state=='0'||state=='2')&&stepActive==2" @click.native="publish"><span class="uex-icon uex-icon-tick"></span>发布</elx-operate-item>
                        </elx-operate-button>
			        </div>
				</div>
				<div class="panel-content">
				    <div class="step panel-left">
					    <div class="step-group">
						    <el-steps :active="stepActive" finish-status="success" direction="vertical">
							    <el-step v-for="title in panelTitles" :title="title" :key="title"></el-step>
						    </el-steps>
					    </div>
				    </div>
				    <div class="panel-right">
					    <div class="step-content pos-rel">
						    <div class="step-pane step-pane-1" v-show="stepActive==0">
						        <base-form ref="baseForm"></base-form>
						    </div>
						    <div class="step-pane step-pane-2" v-show="stepActive==1">
						        <layout></layout>
						    </div>
						    <div class="step-pane step-pane-3" v-show="stepActive==2">
                                <div id="procedureStep">
                                    <ul>
                                        <li class="step active">
                                            <div class="procedure apiion-conf"></div>
                                            <div class="procedure－title apiion-conf-title">基础配置</div>
                                            <div class="procedure－info">基础配置已完成</div>
                                        </li>
                                        <li class="stepLine active" style="width:80px;">
                                            <div class="procedure procedure-line "></div>
                                        </li>
                                        <li class="step active">
                                            <div class="procedure apiion-conf"></div>
                                            <div class="procedure－title apiion-conf-title">编排</div>
                                            <div class="procedure－info">编排已完成</div>
                                        </li>
                                        <li class="stepLine active" style="width:80px;">
                                            <div class="procedure procedure-line "></div>
                                        </li>
                                        <li :class="state=='3'?'step active':'step'">
                                            <div class="procedure has-approval "></div>
                                            <div class="procedure－title in-approval-title">发布</div>
                                            <div class="procedure－info">发布</div>
                                        </li>
                                    </ul>
                                </div>
						    </div>
					    </div>
			        </div>
				</div>
            </div>
        </elx-main>
    </div>
    <script >
		var dataId='${dataId!''}';
	</script>
    <script src="${mvcPath}/dacp-res/js/guid.js"></script>
    <script src="${mvcPath}/dacp-lib/vuex/vuex.min.js"></script>
    <script src="${mvcPath}/dacp-res/js/cMessage.js"></script>
    <script src="${mvcPath}/dacp-view/datastash/workshop/unit_creator/js/store.js"></script>
    <#include "component/base_form.ftl" parse=true/></div>
    <#include "component/layout.ftl" parse=true/></div>
    <script src="${mvcPath}/dacp-view/datastash/workshop/unit_creator/js/unit.js"></script>
</div>
</body>
</html>